<template>
  <div class="ecs" ref="mainChart"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'EchartLine',
  props: {
    XAxis:{
      type: Object,
      default: () => {}
    },
    YAxis:{
      type: Object,
      default: () => {}
    },
    dataAxis:{
      type: String,
      default: ''
    },
    lineData:{
      type: Array,
      default: () => []
    },
    xData:{
      type: Array,
      default: () => []
    },
    lineGrid:{
      type: Object,
      default: () => {}
    },
    lineColor:{
      type: String,
      default: ''
    },
    symbolType:{
      type: String,
      default: ''
    },
    symbolSize:{
      type: Number,
      default: 0
    },
    lineWidth:{
      type: Number,
      default: 0
    },
    lineBgColor:{
      type: [String,Function],
      default: ''
    },
    lineSmooth:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      myOption: {
        xAxis: this.XAxis,
        yAxis: this.YAxis,
        grid: this.lineGrid,
        barWidth: this.barWidth,
        series: [
          {
            data: this.lineData,
            type: 'line',
            itemStyle: {
              color: this.lineColor,
            },
            lineStyle: {
              color: this.lineColor,
              width: this.lineWidth
            },
            smooth: this.lineSmooth,
            symbol: this.symbolType,
            symbolSize: this.symbolSize,
            areaStyle:{
              color: this.lineBgColor
            }
          }
        ]
      }
    }
  },
  computed: {
    
  },
  mounted() {
    let main = this.$refs.mainChart;
    let myChart = echarts.init(main,null,{renderer:'svg'});
    myChart.setOption(this.myOption);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  },
  updated() {
    
  },
  watch: {
    lineData: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.$nextTick(()=>{
          if (this.dataAxis === 'y') {
            this.myOption.xAxis.data = this.xData;
            this.myOption.series[0].data = newVal;
          }else{
            this.myOption.yAxis.data = this.xData;
            this.myOption.series[0].data = newVal;
          } 
          const main = this.$refs.mainChart;
          const myChart = echarts.init(main,null,{renderer:'svg'});
          myChart.setOption(this.myOption);
        })
      }
    },
    lineBgColor: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.$nextTick(()=>{
          this.myOption.series[0].areaStyle.color = newVal; 
          const main = this.$refs.mainChart;
          const myChart = echarts.init(main,null,{renderer:'svg'});
          myChart.setOption(this.myOption);
        })
      }
    },
    XAxis: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.$nextTick(()=>{
          this.myOption.xAxis = newVal;
          const main = this.$refs.mainChart;
          const myChart = echarts.init(main,null,{renderer:'svg'});
          myChart.setOption(this.myOption);
        })
      }
    },
    YAxis: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.$nextTick(()=>{
          this.myOption.yAxis = newVal;
          const main = this.$refs.mainChart;
          const myChart = echarts.init(main,null,{renderer:'svg'});
          myChart.setOption(this.myOption);
        })
      }
    },
    symbolSize: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.$nextTick(()=>{
          this.myOption.series[0].symbolSize = newVal;
          this.myOption.series[0].lineStyle.width = this.lineWidth;
          const main = this.$refs.mainChart;
          const myChart = echarts.init(main,null,{renderer:'svg'});
          myChart.setOption(this.myOption);
        })
      }
    },
    '$store.state': {
      deep: true,
      immediate: false,
      handler() {
        this.$nextTick(()=>{
          this.myOption.xAxis.axisLabel.color = this.$store.state.colors.barLabelZiColor;
          this.myOption.yAxis.axisLabel.color = this.$store.state.colors.barLabelZiColor;
          this.myOption.series[0].itemStyle.color = this.$store.state.colors.lineColor;
          this.myOption.series[0].lineStyle.color = this.$store.state.colors.lineColor;
          const main = this.$refs.mainChart;
          const myChart = echarts.init(main,null,{renderer:'svg'});
          myChart.setOption(this.myOption);
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.ecs {
  width: 100%;
  height: 100%;
  z-index: 1;
  border: 0px solid blue;
}
</style>